<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>更新问题</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="root">
            <h2>人员列表</h2>
            <button @click="updateMei">更新马冬梅</button>
            <ul>
                <li v-for="p in persons" :key="p.id">
                    {{p.name}} - {{p.age}} -- {{p.gender}}
                </li>
            </ul>

        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                persons:[
                    {id:1, name: '马冬梅', age: 30,gender:"女"},
                    {id:2, name: '周冬雨', age: 19,gender:"女"},
                    {id:3, name: '周杰伦', age: 20,gender:"男"},
                    {id:4, name: '温兆伦', age: 21,gender:"男"},
                ]
            },
            methods: {
                updateMei(){
                    // this.persons[0].name = "马冬梅2" // 生效
                    this.persons[0]={id:1, name: '马冬梅3', age: 30,gender:"女"} // 页面不发生变化, vm中的数据已经发生了变化, 数组不可以通过下标直接修改, 但是可以 push , pop shift, unshift, splice sort reverse 这些数组api来修改数组 
                    this.persons.splice(0,1,{id:1, name: '马冬梅3', age: 30,gender:"女"} )
                }
            },
        })
    </script>
</html> 